<template>
  <div style="width: 100%">
    <div class="content">
      <!-- 这是最上面的布局 -->
      <div
        style="padding: 20px; box-sizing: border-box;color: #fff;border-radius: 10px"
        v-for="(item,index) of numberList"
        :style="{background: item.color,width: '32%',height: '100px'}"
        :key="index"
      >
        <div style="font-size: 24px;padding: 5px 0 0;font-weight: blod">{{dataList[item.type]}}</div>
        <div>{{item.name}}</div>
      </div>
    </div>

    <!-- 这是中间的div -->
    <div style="margin-top:10px;width:100%">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="今天" name="first">
          <homeList :thmensList="thmensList" :contentList='contentList'></homeList>
        </el-tab-pane>
        <el-tab-pane label="昨天" name="second">
          <homeList :thmensList="thmensList" :contentList='contentList'></homeList>
        </el-tab-pane>
        <el-tab-pane label="最近7天" name="third">
          <homeList :thmensList="thmensList" :contentList='contentList'></homeList>
        </el-tab-pane>
        <el-tab-pane label="最近30天" name="fourth">
          <homeList :thmensList="thmensList" :contentList='contentList'></homeList>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import homeList from  '@/components/homeList/index.vue'
export default {
  components: {homeList},
  data() {
    return {
      activeName: 'first',
      dataList: {},
      type: 0,
      thmensList: {},
      numberList: [
        {
          name: "代发货订单",
          type: "orderToDelivery",
          color: "red",
        },
        {
          name: "上架中的商品",
          type: "goodsOnsale",
          color: "green",
        },
        {
          name: "总用户数",
          type: "user",
          color: "grey",
        },
      ],
      contentList: [
        {
          title: '顾客',
          isButton: true,
          children: [
            {
              title: '新增',
              type: 'newUser'
            },
            {
              title: '老顾客',
              type: 'oldUser'
            }
          ],
        },
         {
          title: '下单',
          isButton: false,
          children: [
            {
              title: '加入购物车',
              type: 'addCart'
            },
            {
              title: '提交订单数/金额',
              type: 'addOrderNum',
              num: 'addOrderSum'
            }
          ],
        },
         {
          title: '支付',
          isButton: false,
          children: [
            {
              title: '成交订单数',
              type: 'payOrderNum'
            },
            {
              title: '成交金额',
              type: 'payOrderSum'
            }
          ],
        },
        
      ],
    };
  },

  created() {
    this.loadData();
    this.thmensData();
  },

  methods: {
    handleClick(tab) {
        console.log(tab.index,tab,8888888);
        this.type = tab.index
        this.thmensData()
      },
    loadData() {
      this.axios.ajax({
        url: "/admin/index",
        type: "GET",
        success: (res) => {
          console.log(res);
          if (res.errno == 0) {
            this.dataList = res.data;
          }
        },
      });
    },

    thmensData() {
      this.axios.ajax({
        url: "/admin/index/main",
        type: "GET",
        params: {
          pindex: this.type,
        },
        success: (res) => {
          console.log(res);
          if (res.errno == 0) {
            this.thmensList = res.data;
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>